<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>动态详情页</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<!-- 引入字体 -->
	<script src="../../js/libs/webfontloader.min.js" th:src="@{/js/libs/webfontloader.min.js}"></script>
	<script>
		WebFont.load({
			google: {
				families: ['Roboto:300,400,500,700:latin']
			}
		});
	</script>
	<!-- 引入bootstrap css -->
	<!-- 引入bootstrap css -->
	<link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap-reboot.css" th:href="@{/Bootstrap/dist/css/bootstrap-reboot.css}">
	<link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap.css" th:href="@{/Bootstrap/dist/css/bootstrap.css}">
	<link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap-grid.css" th:href="@{/Bootstrap/dist/css/bootstrap-grid.css}">
	<!-- 引入主要 css -->
	<link rel="stylesheet" type="text/css" href="../../css/main.css" th:href="@{/css/main.css}">
	<link rel="stylesheet" type="text/css" href="../../css/fonts.min.css" th:href="@{/css/fonts.min.css}">

</head>
<body class="page-has-left-panels page-has-right-panels">
<!-- Preloader 预加载 -->
<div th:replace="/_fragment::preload"></div>
<!-- ... end Preloader 结束预加载-->

<!-- Fixed Sidebar Left 左侧菜单 -->
<div th:replace="common/sidebar_left :: sidebar"></div>
<!-- ... end Fixed Sidebar Left 结束左侧菜单-->

<!-- Header-BP 头部导航栏-->
<div th:replace="common/headNav :: headNav"></div>
<!-- ... end Header-BP 结束头部导航栏-->

<!--头部空间-->
<div class="header-spacer-small"></div>
<!--end头部空间-->

<div class="container">
    <div class="row mt50">
        <div class="col col-xl-12 m-auto col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="ui-block">
                <!-- Single Post 动态-->
                <article class="hentry blog-post single-post single-post-v2">
					<!--数据：动态标题、发布时间、获赞、评论；动态发布者头像、昵称、个人主页地址-->
                    <a href="#" class="post-category bg-blue-light">动态</a>
                    <h2 class="h1 post-title" th:text="${publish.pTitle}">Hualala</h2>
                    <div class="single-post-additional inline-items">
                        <div class="post__author author vcard inline-items">
                            <img alt="author" src="../../img/avatar2-sm.jpg" th:src="@{${publish.user.headPhoto}}" class="动态创建者头像">
                            <div class="author-date not-uppercase">
                                <a class="h6 post__author-name fn" href="#" th:text="${publish.user.uname}">Jack Scorpio</a>
                                <div class="author_prof">创建者</div>
                            </div>
                        </div>
                        <div class="post-date-wrap inline-items">
                            <svg class="olymp-calendar-icon">
                                <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-calendar-icon"></use>
                            </svg>
                            <div class="post-date">
                                <span class="h6 date" th:text="${publish.pTime}">2021/3/25 13:00</span>
                                <span>创建时间</span>
                            </div>
                        </div>
                        <div class="post-comments-wrap inline-items">
                            <svg class="olymp-comments-post-icon">
                                <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-comments-post-icon"></use>
                            </svg>
                            <div class="post-comments">
                                <span class="h6 comments" th:text="${publish.commentNum}">14</span>
                                <span>评论</span>
                            </div>
                        </div>
                        <div class="post-comments-wrap inline-items">
                            <svg class="olymp-heart-icon">
                                <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                            </svg>
                            <div class="post-comments">
                                <span class="h6 comments" th:text="${publish.likeNum}">14</span>
                                <span>获赞</span>
                            </div>
                        </div>
                    </div>
					<!--数据：动态内容-->
                    <div class="post-content-wrap">
                        <div class="post-content">
							<!--文字内容-->
                            <h5 class="weight-normal" th:text="${publish.pContent}"></h5>

							<!--事件：图片处理-->
							<!--图片-->
                            <div class="single-post-slider">
                                <div class="swiper-container" data-autoplay="4000">
                                    <!-- Additional required wrapper -->
                                    <div class="swiper-wrapper" th:if="${publish.images} != null">
                                        <!-- Slides 切换前后张图片 -->
                                        <div class="swiper-slide" th:each="image:${publish.images}">
                                            <img src="../../img/slide1.jpg"   th:src="${image}" alt="photo1">
                                        </div>
                                    </div>
                                </div>
                                <!--图片轮播切换-->
                                <div class="slider-slides" th:if="${publish.images} != null">

									<a href="#" class="slides-item" th:each="image:${publish.images}" >
										<img src="../../img/photo-tabs11.jpg" style="width: 80px"  th:src="${image}" alt="slide1">
										<div class="overlay overlay-dark"></div>
									</a>

                                    <!--Prev Next Arrows-->
                                    <svg class="btn-next olymp-popup-right-arrow">
                                        <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-popup-right-arrow"></use>
                                    </svg>
                                    <svg class="btn-prev olymp-popup-left-arrow">
                                        <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-popup-left-arrow"></use>
                                    </svg>
                                </div>
								<!--结束图片轮播切换-->
                            </div>
                        </div>
                    </div>
                </article>
                <!-- ... end Single Post 结束动态-->
                <!-- Comments 评论区 -->
                <ul class="comments-list" th:if="${publish.comments} != null" >
					<!--单条父亲评论-->
					<!--数据：评论者头像、昵称、个人主页地址；评论获赞、评论时间、评论内容-->
                    <li class="comment-item" th:each="comment : ${publish.comments}">
						<!--评论头部-->
                        <div class="post__author author vcard inline-items">
                            <img src="../../img/avatar1-sm.jpg" th:src="@{${comment.user.headPhoto}}"  alt="author">
                            <div class="author-date">
                                <a class="h6 post__author-name fn" href="#" th:text="${comment.user.uname}">Elaine Dreyfuss</a>
                                <div class="post__date">
                                    <time class="published" th:text="${comment.commentTime}">
                                        5 mins ago
                                    </time>
                                </div>
                            </div>
                        </div>
						<!--评论内容
						  点击可跳转至评论详情
						  th:href="@{/comment/{commentId}/detail(commentId=${comment.commentId})}"
						-->
						<a class="published" style="color: #252729" >
							<p th:text="${comment.content}">

							</p>
						</a>

						<!--评论尾部-->
                        <a href="#" class="post-add-icon inline-items">
                            <svg class="olymp-heart-icon">
                                <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                            </svg>
							<!--子评论数-->
                            <span th:text="${comment.cNum}">8</span>
                        </a>
                        <a data-toggle="modal" data-target="#popup-write-rewiev" href="#" class="reply">回复</a>

                        <!--子评论列表-->
<!--                        <p th:text="${comment.comments}"></p>-->
                        <ul class="children" th:if="${comment.comments} != null">
                            <!--单条子评论-->
                            <li class="comment-item" th:each="c : ${comment.comments}">
                                <!--评论头部-->
                                <div class="post__author author vcard inline-items">
                                    <img src="../../img/avatar1-sm.jpg" th:src="@{'/img/'+${c.user.headPhoto}}" alt="author">
                                    <div class="author-date">
                                        <a class="h6 post__author-name fn" href="#" th:text="${c.user.uname}">Diana Jameson</a>
                                        <div class="post__date">
                                            <time class="published" th:text="${c.commentTime}">
                                                39 mins ago
                                            </time>
                                        </div>
                                    </div>
                                </div>
                                <!--评论内容-->
                                <p th:text="${c.content}">
                                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                    fugiat nulla pariatur.
                                </p>
                                <!--评论尾部-->
                                <a href="#" class="post-add-icon inline-items">
                                    <svg class="olymp-heart-icon">
                                        <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                    </svg>
                                    <span>2</span>
                                </a>
                                <!--                <a href="#" class="reply">回复</a>-->
                            </li>
                        </ul>

                        <div class="modal fade" id="popup-write-rewiev" tabindex="-1" role="dialog" aria-labelledby="popup-write-rewiev" style="display: none;" aria-hidden="true">
                            <div class="modal-dialog window-popup popup-write-rewiev" role="document">
                                <div class="modal-content">
                                    <a href="#" class="close icon-close" data-dismiss="modal" aria-label="Close">
                                        <svg class="olymp-close-icon"><use xlink:href="#olymp-close-icon"></use></svg>
                                    </a>
                                    <div class="modal-header">
                                        <h6 class="title">评论</h6>
                                    </div>
                                    <!--模态框-->
                                    <div class="modal-body">
                                        <form class="form-write-rewiev" method="post" th:action="@{/pubcomment/{id}/comment/{pId}(id=${comment.commentId},pId=${publish.pId})}">
                                            <div class="row">
                                                <div class="col col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">请在此发表评论……</label>
                                                        <textarea name="comment_content" class="form-control" placeholder="" required></textarea>
                                                        <span class="material-input"></span></div>
                                                    <button class="btn btn-primary btn-lg full-width">提交评论</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>

                </ul>
                <!-- ... end Comments 结束评论区-->
				<!--事件：查看更多评论/注释-->
                <!--<a href="#" class="more-comments"> 查看更多评论 <span>+</span></a>-->
                <!-- Comment Form  提交评论-->
                <form class="comment-form inline-items" method="post" th:action="@{/publish/{pid}/comment(pid=${publish.pId})}" >
                    <div class="post__author author vcard inline-items">
                        <img src="../../img/author-page.jpg" th:src="@{'/img/'+${session.user.getHeadPhoto()}}" alt="author">
                        <div class="form-group with-icon-right ">
                            <textarea class="form-control" name="publish_comment" placeholder="在此发表评论……" required></textarea>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-md-2 btn-primary">提交</button>
                    <button class="btn btn-md-2 btn-border-think c-grey btn-transparent custom-color">取消</button>
                </form>
                <!-- ... end Comment Form 结束提交评论 -->
            </div>
        </div>
    </div>
</div>

<!--向上返回 按钮-->
<a class="back-to-top" href="#">
    <img src="../../svg-icons/back-to-top.svg" th:src="@{/svg-icons/back-to-top.svg}" alt="arrow" class="back-icon">
</a>

<!--评论父评论-->
<!--结束评论模态框-->
<div th:replace="/_fragment::footer">
	<!-- JS Scripts ../../-->
	<script src="../../js/jQuery/jquery-3.4.1.js"></script>
	<script src="../../js/libs/jquery.appear.js"></script>
	<script src="../../js/libs/jquery.mousewheel.js"></script>
	<script src="../../js/libs/perfect-scrollbar.js"></script>
	<script src="../../js/libs/jquery.matchHeight.js"></script>
	<script src="../../js/libs/svgxuse.js"></script>
	<script src="../../js/libs/imagesloaded.pkgd.js"></script>
	<script src="../../js/libs/Headroom.js"></script>
	<script src="../../js/libs/velocity.js"></script>
	<script src="../../js/libs/ScrollMagic.js"></script>
	<script src="../../js/libs/jquery.waypoints.js"></script>
	<script src="../../js/libs/jquery.countTo.js"></script>
	<script src="../../js/libs/popper.min.js"></script>
	<script src="../../js/libs/material.min.js"></script>
	<script src="../../js/libs/bootstrap-select.js"></script>
	<script src="../../js/libs/smooth-scroll.js"></script>
	<script src="../../js/libs/selectize.js"></script>
	<script src="../../js/libs/swiper.jquery.js"></script>
	<script src="../../js/libs/isotope.pkgd.js"></script>
	<script src="../../js/libs/ajax-pagination.js"></script>
	<script src="../../js/libs/circle-progress.js"></script>
	<script src="../../js/libs/loader.js"></script>
	<script src="../../js/libs/run-chart.js"></script>
	<script src="../../js/libs/jquery.magnific-popup.js"></script>
	<script src="../../js/libs/ion.rangeSlider.js"></script>

	<script src="../../js/main.js"></script>
	<script src="../../js/libs-init/libs-init.js"></script>
	<script defer src="../../fonts/fontawesome-all.js"></script>

	<script src="../../Bootstrap/dist/js/bootstrap.bundle.js"></script>
</div>

</body>

</html>